<template>
	<view class="">
		<view class="info-box">
			<!-- 车次航班号-->
			<view class="info-box-item align-center">
				<u-input placeholderStyle='color:#6C6C6C' class="info-box" fontSize='26rpx' v-model="flight_num"
					:placeholder="getLable.inputLabel" border="none" clearable></u-input>
			</view>
		</view>
		<u-datetime-picker ref="datetimePicker" @confirm="useCarconfirm" :formatter="formatter"
			@cancel="useCarShow=false" @close='useCarShow=false' :show="useCarShow" v-model="useCarTime"
			mode="datetime"></u-datetime-picker>
		<!-- <view class="info-box align-center" @tap="useCarShow=true"> -->
		<view class="info-box align-center" >
			<uni-datetime-picker type="datetime" v-model="usage_time" @change="changeLog" :start='getStartTime' hide-second>
			<view class="info-box-item justify-between">
				<view class="align-center">
					{{usage_time || getStartTime || '请选择用车时间'}}
				</view>
				<view class="align-center">
					<u-icon name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>
			</uni-datetime-picker>
		</view>
		<!-- 	<u-picker @close='airShow' @confirm="airConfirm" @cancel="airShow=!airShow" :show="airShow"
			:columns="airColumns" keyName='name'></u-picker> -->
		<view class="info-box align-center" @tap="airShow=!airShow"
			v-if="selectCarTypeCurrent==0 || selectCarTypeCurrent==2">
			<picker :range="airColumns[0]" range-key='name' mode='selector' @change='airConfirm'
				:header-text='getLable.pickerText'>
				<view class="info-box-item justify-between ">
					<view class="align-center ">
						<!-- {{air.star_site || getLable.locationName}} -->
						<view class="picker">
							{{air.star_site || getLable.locationName}}
						</view>
					</view>
					<view class="align-center ">
						<u-icon name="arrow-right" size="23rpx"></u-icon>
					</view>
				</view>
			</picker>
		</view>
		<view class="info-box align-center" @tap="chooseLocation">
			<view class="info-box-item justify-between">
				<view class="align-center">
					{{end_site || getLable.lable1}}
				</view>
				<view class="align-center">
					<u-icon name="arrow-right" size="23rpx"></u-icon>
				</view>
			</view>

		</view>
		<view class="info-box align-center" @tap="airShow=!airShow"
			v-if="selectCarTypeCurrent==1 || selectCarTypeCurrent==3">
			<picker :range="airColumns[0]" range-key='name' mode='selector' @change='airConfirm'
				:header-text='getLable.pickerText'>
				<view class="info-box-item justify-between">
					<view class="align-center">
						{{air.star_site || getLable.locationName}}
					</view>
					<view class="align-center">
						<u-icon name="arrow-right" size="23rpx"></u-icon>
					</view>
				</view>
			</picker>
		</view>


		<view class="info-box align-center">
			<view class="info-box-item justify-between">
				<view class="align-center">
					{{getLable.lable2}}
				</view>
				<view class="align-center">
					<u-number-box integer bgColor='#ffffff00' v-model="people_num" @change='peopleChange'
						:max='carPeopleNum'>
						<view slot="minus" class="minus">
							<u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
						</view>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
						</view>

					</u-number-box>
				</view>
			</view>

		</view>
		<view class="info-box align-center">
			<view class="info-box-item justify-between" style="border: none;">
				<view class="align-center">
					备注
				</view>
				<view class="remark align-center">

					<u-input placeholderStyle='color:#8C8C8C' inputAlign='right' class="info-box" v-model="notes"
						fontSize='26rpx' placeholder="请填写您的需求" border="none" clearable></u-input>
				</view>
			</view>

		</view>
		<view class="" style="height: 15rpx;">
		</view>
	</view>
</template>

<script>
	import {
		host
	} from '@/config/config.js'
	import {
		mapActions
	} from 'vuex'
	import {
		arriveType,
	} from '@/utils/constants.js'
	export default {
		name: "tab0",
		props: {
			selectCarTypeCurrent: {
				default: 0,
			},
			save: {
				default: false,
			},
			carPeopleNum: {
				default: 1,
			},
			selectMaxTime: {
				default: 0,
			},
		},
		data() {
			return {
				datetimesingle: '',
				people_num: 1, //人数
				notes: '', //备注
				flight_num: '', //车次航班号
				end_site: '',
				usage_time: '', //用车时间
				noteShow: false,
				useCarTime: Number(new Date()),
				useCarShow: false,
				car_note: '',
				carInd: null,
				airColumns: [
					[]
				],
				air: {
					star_site: '', //终点机场 车站
					latAndLon: {}, //经纬度
				},
				peopleLatAndLon: {},
				airShow: false,
				tabList: [],
				loading: false,
				typeList: [{
						val: 0,
						lable1: '请填写下车地点',
						lable2: '接机人数',
						inputLabel: '请输入航班号',
						locationName: '请选择起点机场',
						pickerText: '起点机场'
					},
					{
						val: 1,
						lable1: '请填写上车地点',
						lable2: '送机人数',
						inputLabel: '请输入航班号',
						locationName: '请选择终点机场',
						pickerText: '终点机场'
					},
					{
						val: 2,
						lable1: '请填写下车地点',
						lable2: '接站人数',
						inputLabel: '请输入车次',
						locationName: '请选择接站车站',
						pickerText: '接站车站'
					},
					{
						val: 3,
						lable1: '请填写上车地点',
						lable2: '送站人数',
						inputLabel: '请输入车次',
						locationName: '请选择终点车站',
						pickerText: '终点车站'
					},
				],
				airStation: [],
				trainStation: [],
			};
		},
		watch: {
			save(newVal) {
				if (newVal) {
					let info = {
						flight_num: this.flight_num,
						usage_time: this.usage_time,
						star_site: this.air.star_site,
						end_site: this.end_site,
						notes: this.notes,
						people_num: this.people_num,
						split_type: this.getSplitType,
						airLatAndLon: this.air.latAndLon,
						peopleLatAndLon: this.peopleLatAndLon
					}
					console.log('info', info);
					this.$store.commit('SAVE_CAR_INFO', info)
				}
			},
			selectCarTypeCurrent(newVal) {
				this.rest()
				if (newVal < 2) {
					this.airColumns = [
						[...this.airStation]
					]
				} else {
					this.airColumns = [
						[...this.trainStation]
					]
				}

			},
		},
		computed: {
			getLable() {
				return this.typeList.find(item => item.val == this.selectCarTypeCurrent)
			},
			getSplitType() {
				return arriveType.find(item => item.ind == this.selectCarTypeCurrent).name
			},
			getStartTime(){
				return this.$moment().add(this.selectMaxTime, 'hours').format('YYYY-MM-DD HH:mm')
			}

		},
		created() {
			this.usage_time = this.$moment().add(this.selectMaxTime, 'hours').format('YYYY-MM-DD HH:mm')
			this.getCarInfo()
		},
		mounted() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},


		methods: {
			// 机场 车站
			...mapActions(['getAirList', 'getStationList']),
			useCarconfirm(e) {
				this.usage_time = this.$moment(e.value).format('YYYY-MM-DD hh:mm')
				this.useCarShow = false
			},
			changeLog(e) {
				this.usage_time = e
				console.log('change事件:', e);
			},
			peopleChange(e) {
				console.log(e.value, 'peopleChangepeopleChangepeopleChangepeopleChange');
				this.$emit('peopleChange', e.value)
			},
			rest() {
				this.end_site = ''
				this.air = {
					star_site: '', //终点机场 车站
					latAndLon: {}, //经纬度
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},

			chooseLocation() {
				let _this = this
				uni.chooseLocation({
					complete(e) {
						console.log(e);
						_this.end_site = e.name
						_this.peopleLatAndLon = e
						_this.$store.commit('SAVE_LAT_LON', e)
					}
				})
			},
			airConfirm(e) {
				console.log(e.detail.value[0]);
				let value = e.detail.value[0]
				this.air.star_site = this.airColumns[0][value].name
				this.air.latAndLon = this.airColumns[0][value]
				// this.air.star_site = this.airColumns[0][e.indexs[0]].name
				// this.air.latAndLon = this.airColumns[0][e.indexs[0]]
				// this.airShow= false
			},
			async getCarInfo() {
				// 机场
				let arires = await this.getAirList()
				let stationres = await this.getStationList()
				this.airStation = arires
				this.trainStation = stationres
				this.airColumns = [
					[...arires]
				]
				this.loading = true
			},


		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.info-box {
		height: 90rpx;
		padding: 0 30rpx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		font-size: 26rpx;

		picker {
			width: 100%;
		}

		uni-datetime-picker {
			width: 100%;
		}

		.info-box-item {
			width: 100%;
			height: 90rpx;
			flex: 1;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #6C6C6C;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			.minus {
				width: 38rpx;
				height: 38rpx;
				background-color: #FFAAAA;
				border-top-left-radius: 100px;
				border-top-right-radius: 100px;
				border-bottom-left-radius: 100px;
				border-bottom-right-radius: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.input {
				padding: 0 10px;
			}

			.plus {
				width: 38rpx;
				height: 38rpx;
				background-color: #C73636;
				border-radius: 50%;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
			}

			.remark {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 24rpx;
			}
		}
	}
</style>